聊天室：登录、注册页面开发

先不着急开发聊天功能，我们先来写一下前端页面。

先来写下用户注册、登录这两个：

新建个 react 项目：

npx create-vite chat-room-frontend

进入项目目录，把开发服务跑起来：

npm install
npm run dev

浏览器访问 http://localhost:5173 可以看到这个界面：

就说明 react 项目成功跑起来了。

然后我们添加 router：

npm install --save react-router-dom

在 main.tsx 加上路由的配置：

import ReactDOM from "react-dom/client";
import {
    RouterProvider,
    createBrowserRouter,
    Link,
    Outlet,
} from "react-router-dom";

function Aaa() {
    return <div>aaa</div>;
}

function Bbb() {
    return <div>bbb</div>;
}

function Layout() {
    return (
        <div>
            <div>
                <Link to="/aaa">to aaa</Link>
            </div>
            <div>
                <Link to="/bbb">to bbb</Link>
            </div>
            <div>
                <Outlet />
            </div>
        </div>
    );
}

const routes = [
    {
        path: "/",
        element: <Layout />,
        children: [
            {
                path: "aaa",
                element: <Aaa />,
            },
            {
                path: "bbb",
                element: <Bbb />,
            },
        ],
    },
];
const router = createBrowserRouter(routes);

const root = ReactDOM.createRoot(
    document.getElementById("root") as HTMLElement
);

root.render(<RouterProvider router={router} />);

配置了 3 个路由：

访问 / 的时候，渲染 Layout 组件。

访问 /aaa 的时候，渲染 Aaa 组件。

访问 /bbb 的时候，渲染 Bbb 组件。

以及出错的时候，渲染 ErrorPage 组件。

其中，aaa 和 bbb 是 / 的子路由，渲染在 Layout 组件的 Outlet 的地方。

这就是 React Router 的基本用法。

测试下：

都没问题。

然后创建 3 个组件：Login、Register、UpdatePassword

pages/Login/index.tsx

export function Login() {
    return <div>login</div>;
}

pages/Register/index.tsx

export function Register() {
    return <div>register</div>;
}

pages/UpdatePassword/index.tsx

export function UpdatePassword() {
    return <div>UpdatePassword</div>;
}

改下 index.tsx 配置对应的路由：

import ReactDOM from "react-dom/client";
import { RouterProvider, createBrowserRouter } from "react-router-dom";
import { Register } from "./pages/Register";
import { Login } from "./pages/Login";
import { UpdatePassword } from "./pages/UpdatePassword";

const routes = [
    {
        path: "/",
        element: <div>index</div>,
    },
    {
        path: "login",
        element: <Login />,
    },
    {
        path: "register",
        element: <Register />,
    },
    {
        path: "update_password",
        element: <UpdatePassword />,
    },
];
const router = createBrowserRouter(routes);

const root = ReactDOM.createRoot(
    document.getElementById("root") as HTMLElement
);

root.render(<RouterProvider router={router} />);

测试下：

都没啥问题。

然后来写 Login 页面，也就是这个：

引入 Ant Design 组件库：

npm install antd --save

在 Login 组件引入 DatePicker 组件：

import { DatePicker } from "antd";

export function Login() {
    return (
        <div>
            <DatePicker />
        </div>
    );
}

没啥问题，说明 antd 引入成功了。

然后我们把登录页面写一下：

import { Button, Checkbox, Form, Input } from "antd";
import "./index.css";

interface LoginUser {
    username: string;
    password: string;
}

const onFinish = (values: LoginUser) => {
    console.log(values);
};

const layout1 = {
    labelCol: { span: 4 },
    wrapperCol: { span: 20 },
};

const layout2 = {
    labelCol: { span: 0 },
    wrapperCol: { span: 24 },
};

export function Login() {
    return (
        <div id="login-container">
            <h1>聊天室</h1>
            <Form
                {...layout1}
                onFinish={onFinish}
                colon={false}
                autoComplete="off">
                <Form.Item
                    label="用户名"
                    name="username"
                    rules={[{ required: true, message: "请输入用户名!" }]}>
                    <Input />
                </Form.Item>

                <Form.Item
                    label="密码"
                    name="password"
                    rules={[{ required: true, message: "请输入密码!" }]}>
                    <Input.Password />
                </Form.Item>

                <Form.Item {...layout2}>
                    <div className="links">
                        <a href="/register">创建账号</a>
                        <a href="/update_password">忘记密码</a>
                    </div>
                </Form.Item>

                <Form.Item {...layout2}>
                    <Button className="btn" type="primary" htmlType="submit">
                        登录
                    </Button>
                </Form.Item>
            </Form>
        </div>
    );
}

其中，layout 是 label 和 wrapper 的比例分配，antd 的栅格系统一共分了 24 份。

上面两个 Form.Item 是 label 4 份，wrapper 20 份。

下面两个 Form.Item 是 label 0 份，wrapper 24 份。

colon 为 false 是去掉 label 后的冒号

然后 css 部分如下：

#login-container {
    width: 400px;
    margin: 100px auto 0 auto;
    text-align: center;
}
#login-container .links {
    display: flex;
    justify-content: space-between;
}
#login-container .btn {
    width: 100%;
}

访问 /login，可以看到现在的登录页面：

输入用户名、密码，点击登录：

控制台打印了拿到的表单值。

我们在前端项目安装下 axios：

npm install --save axios

我们把后端服务端口改为 3005，并且开启跨域：

然后把后端项目跑起来：

npm run start:dev

在前端项目创建个 interfaces/index.ts

import axios from "axios";

const axiosInstance = axios.create({
    baseURL: "http://localhost:3005/",
    timeout: 3000,
});

export async function login(username: string, password: string) {
    return await axiosInstance.post("/user/login", {
        username,
        password,
    });
}

在这里集中管理接口。

然后在 Login 组件 onFinish 里调用：

const onFinish = async (values: LoginUser) => {
    try {
        const res = await login(values.username, values.password);
        if (res.status === 201 || res.status === 200) {
            message.success("登录成功");

            console.log(res.data);
        }
    } catch (e: any) {
        message.error(e.response?.data?.message || "系统繁忙，请稍后再试");
    }
};

登录下：

然后完善下 onFinish 方法：

const onFinish = async (values: LoginUser) => {
    try {
        const res = await login(values.username, values.password);
        if (res.status === 201 || res.status === 200) {
            message.success("登录成功");

            localStorage.setItem("token", res.data.token);
            localStorage.setItem("userInfo", JSON.stringify(res.data.user));
        }
    } catch (e: any) {
        message.error(e.response?.data?.message || "系统繁忙，请稍后再试");
    }
};

返回 success 的时候，把 token 和 userInfo 存入 localStorage

测试下：

这样，登录的前后端功能就都完成了。

然后来写下注册：

实现下 Register 页面组件：

import { Button, Form, Input, message } from "antd";
import "./index.css";
import { useForm } from "antd/es/form/Form";

export interface RegisterUser {
    username: string;
    nickName: string;
    password: string;
    confirmPassword: string;
    email: string;
    captcha: string;
}

const onFinish = async (values: RegisterUser) => {
    console.log(values);
};

const layout1 = {
    labelCol: { span: 6 },
    wrapperCol: { span: 18 },
};

const layout2 = {
    labelCol: { span: 0 },
    wrapperCol: { span: 24 },
};

export function Register() {
    const [form] = useForm();

    return (
        <div id="register-container">
            <h1>聊天室</h1>
            <Form
                form={form}
                {...layout1}
                onFinish={onFinish}
                colon={false}
                autoComplete="off">
                <Form.Item
                    label="用户名"
                    name="username"
                    rules={[{ required: true, message: "请输入用户名!" }]}>
                    <Input />
                </Form.Item>

                <Form.Item
                    label="昵称"
                    name="nickName"
                    rules={[{ required: true, message: "请输入昵称!" }]}>
                    <Input />
                </Form.Item>

                <Form.Item
                    label="密码"
                    name="password"
                    rules={[{ required: true, message: "请输入密码!" }]}>
                    <Input.Password />
                </Form.Item>

                <Form.Item
                    label="确认密码"
                    name="confirmPassword"
                    rules={[{ required: true, message: "请输入确认密码!" }]}>
                    <Input.Password />
                </Form.Item>

                <Form.Item
                    label="邮箱"
                    name="email"
                    rules={[
                        { required: true, message: "请输入邮箱!" },
                        { type: "email", message: "请输入合法邮箱地址!" },
                    ]}>
                    <Input />
                </Form.Item>

                <div className="captcha-wrapper">
                    <Form.Item
                        label="验证码"
                        name="captcha"
                        rules={[{ required: true, message: "请输入验证码!" }]}>
                        <Input />
                    </Form.Item>
                    <Button type="primary">发送验证码</Button>
                </div>

                <Form.Item {...layout2}>
                    <div className="links">
                        已有账号？去<a href="/login">登录</a>
                    </div>
                </Form.Item>

                <Form.Item {...layout1} label=" ">
                    <Button className="btn" type="primary" htmlType="submit">
                        注册
                    </Button>
                </Form.Item>
            </Form>
        </div>
    );
}

和登录页面差不多，只不过多了一个验证码。

对应的 register.css 如下：

#register-container {
    width: 400px;
    margin: 100px auto 0 auto;
    text-align: center;
}
#register-container .links {
    display: flex;
    justify-content: flex-end;
}
#register-container .btn {
    width: 100%;
}
#register-container .captcha-wrapper {
    display: flex;
    justify-content: flex-end;
}

浏览器访问下

填入信息，点击注册，控制台会打印表单值：

然后来调用下注册接口和发送验证码的接口。

在 interfaces 里添加这两个接口：

export async function registerCaptcha(email: string) {
    return await axiosInstance.get("/user/register-captcha", {
        params: {
            address: email,
        },
    });
}

export async function register(registerUser: RegisterUser) {
    return await axiosInstance.post("/user/register", registerUser);
}

先调用发送验证码接口：

绑定点击事件。

使用 useForm 来拿到 form 的 api

async function sendCaptcha() {
    const address = form.getFieldValue("email");
    if (!address) {
        return message.error("请输入邮箱地址");
    }

    try {
        const res = await registerCaptcha(address);
        if (res.status === 201 || res.status === 200) {
            message.success("发送成功");
        }
    } catch (e: any) {
        message.error(e.response?.data?.message || "系统繁忙，请稍后再试");
    }
}

在 sendCaptcha 里调用接口发送验证码。

测试下：

没啥问题。

然后再来调用注册接口：

const onFinish = async (values: RegisterUser) => {
    if (values.password !== values.confirmPassword) {
        return message.error("两次密码不一致");
    }
    const res = await register(values);

    if (res.status === 201 || res.status === 200) {
        message.success("注册成功");
    } else {
        message.error(res.data.data || "系统繁忙，请稍后再试");
    }
};

测试下：

填入信息，点击发送验证码：

去邮箱里看一下验证码：

填入验证码，点击注册：

注册成功，数据库里也看到了这条记录：

这样，注册的前后端流程就走完了。

然后调用 useNavigate 的 navigate 方法，注册成功后导航到登录页：

const onFinish = async (values: RegisterUser) => {
    if (values.password !== values.confirmPassword) {
        return message.error("两次密码不一致");
    }
    try {
        const res = await register(values);

        if (res.status === 201 || res.status === 200) {
            message.success("注册成功");
            setTimeout(() => {
                navigate("/login");
            }, 1000);
        }
    } catch (e: any) {
        message.error(e.response?.data?.message || "系统繁忙，请稍后再试");
    }
};

同理，login 成功也要加上跳转逻辑：

这样，登录和注册的前后端功能就都完成了。

案例代码在小册仓库：

前端代码

后端代码

总结

这节我们打通了前后端，加上了登录、注册、首页等页面。

首先，引入了 React Router 来做路由，引入了 antd 来做 UI 组件库。

然后，引入了 axios 来发请求。

发送邮件验证码正常，注册之后数据库也多了记录，登录成功之后 localStorage 也有了用户信息。

这样，注册登录就实现了完整的前后端功能。